<template>
    <!-- <hello-world></hello-world> -->

    <el-card class="page-container">
        <input type="file" name="file" id="file" @change="onChangeFile" />

        <el-row :gutter="16">
            <el-col :span="3">
                <ul class="list">
                    <li
                        v-for="(item, index) in list"
                        :key="index"
                        :class="{ active: index == current }"
                        @click="current = index"
                    >
                        {{ item.name }}
                    </li>
                </ul>
            </el-col>
            <el-col :span="21">
                <el-row
                    type="flex"
                    justify="space-between"
                    style="margin-bottom: 16px"
                >
                    <el-button type="primary" @click="prev">上一个</el-button>
                    <span>{{ current }}</span>
                    <el-button type="primary" @click="next">下一个</el-button>
                </el-row>
                <hello-world v-if="show" :filePath="list[current].url">
                </hello-world>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
import HelloWorld from "@/components/HelloWorld";

export default {
    components: {
        "hello-world": HelloWorld,
    },
    data() {
        return {
            list: [],
            current: 0,
            show: false,
        };
    },
    watch: {
        current: {
            handler() {
                this.refresh();
            },
        },
    },
    // 组件逻辑
    methods: {
        onChangeFile(e) {
            const that = this;
            const file = e.target.files[0];
            // console.log(e.target.files);
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = function (ev) {
                const url = ev.target.result;
                // console.log(url)
                that.list.push({
                    name: file.name,
                    url,
                });
                that.current = that.list.length - 1;
                that.refresh();
            };
        },
        prev() {
            if (this.current > 0) {
                this.current--;
            }
        },
        next() {
            if (this.current < this.list.length - 1) {
                this.current++;
            }
        },
        refresh() {
            this.show = false;
            this.$nextTick(() => {
                this.show = true;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.page-container {
    min-height: calc(100% - 0px);
    box-sizing: border-box;
    .list {
        border: 1px solid #ebeef5;
        height: 100%;
        li {
            cursor: pointer;
            &.active {
                color: #409eff;
            }
        }
    }
}
</style>
